<template>
  <div class="elevator-menu">
    <template v-for="menu in showMenu">
      <el-row :key="menu.path" type="flex" :class="isActiveMenu(menu.path) ? 'menu-class-a' : 'menu-class-d'" align="middle" @click.native="menuClick(menu)">
        <img class="menu-icon" :src="menu.icon" />
        <span class="menu-name">{{menu.name}}</span>
      </el-row>
    </template>
  </div>
</template>

<script>
import img_organization_a from '@/assets/main/img_organization_a.png'
import img_members_a from '@/assets/main/img_members_a.png'

const allMenu = [
  {name: '经典监控', path: '/MonitorList', icon: img_organization_a},
  {name: '电梯列表', path: '/ElevatorList', icon: img_members_a}
]

export default {
  data() {
    return {
      img_organization_a,
      img_members_a,
      menuHeight: 600,
      showMenu:allMenu,
      defaultRouter:'/MonitorList',
    }
  },
  mounted () {
    // this.menuHeight = document.querySelector('html').clientHeight
    this.menuClick(this.showMenu[0])
  },

  methods: {
    isActiveMenu(path) {
      if (path == '/MonitorList') {
        return this.defaultRouter == '/MonitorList' || this.defaultRouter == '/MonitorGrid' || this.defaultRouter == '/MonitorDetail'
      } else if (path == '/ElevatorList') {
        return this.defaultRouter == '/ElevatorList'
      }
      return false
    },
    menuClick(menu) {
      console.log("---------------- menu.path = " + menu.path)
      if (this.defaultRouter != menu.path) {
        this.defaultRouter = menu.path
        this.$router.push(menu.path);
      }
    },
		updateActiveRoute() {
      this.defaultRouter = this.$route.path;
    },
  },
  watch: {
    "$route": "updateActiveRoute", // 监听url变化，会执行对应方法
	},
}
</script>

<style scoped lang="scss">
.elevator-menu {
  width: 155px;
  height: 600px;
  .menu-class-a {
    width: 155px;
    height: 50px;
    cursor: pointer;
    background: linear-gradient(to top, #9196A4 , #CFD3DE);
    
    .menu-name {
      font-size: 14px;
      color: black;
    }
  }
  .menu-class-d {
    width: 155px;
    height: 50px;
    cursor: pointer;

    .menu-name {
      font-size: 14px;
      color: white;
    }
  }

  .menu-icon {
    width: 15px;
    height: 15px;
    margin-left: 15px;
    margin-right: 10px;
  }
}
</style>